
<template>
  <div class="hot-img">
    <div class="scroll-container" @touchstart.stop @touchmove.stop>
      <div class="list-container">
        <div class="item flex items-center flex-col justify-center" v-for="item in hotImgData" :key="item.id" :class="item.type">
          <p class="name font-26">{{ item.name }}</p>
          <p class="change font-26">{{ item.change >= 0 ? '+' : '' }}{{ item.change }}%</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HotImg',
  props: {
    hotImgData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-img {
  padding: 1rem 0;

  .scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
    
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .list-container {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    width: fit-content;
    touch-action: pan-x;
  }

  .item {
    width: 20rem;
    height: 8rem;
    padding: 1.5rem;
    .change {
        color:#0D0D0D;
    }
    &.up {
        background: #C1C4CB;

    }

    &.down {
        background: #E19B99;
      
    }

    .name {
        color:#0D0D0D;
    }
  }
}
</style>
